<template>
  <view>
    <!-- 登录后背景盒子 -->
    <view class="login" v-if="isLogin">
      <view class="headPortrait">
      <u-image width="172rpx" height="172rpx" shape="circle" src="https://img1.baidu.com/it/u=1429201663,1954415843&fm=253&fmt=auto&app=138&f=GIF?w=350&h=200"></u-image>
        <p class="name">蟹老板</p>
        </view>
    </view>
   <!-- 去登陆模块 -->
   <view class="login" v-else>

    <u-button class="goLogin" @click="show=true">去登录</u-button>

   </view>

   <!-- 分布导航模块 -->

   <view class="nav">
     <u-icon label="待付款" size="60" name="shopping-cart-fill" label-pos="bottom" label-size="12px" margin-top="16rpx" color="red" label-color="red"></u-icon>
     <u-icon label="待收货" size="60" name="car-fill" label-pos="bottom" label-size="12px" margin-top="16rpx"></u-icon>
     <u-icon label="待退款" size="60" name="rmb-circle-fill" label-pos="bottom" label-size="12px" margin-top="16rpx"></u-icon>
      <u-icon label="全部订单" size="60" name="file-text" label-pos="bottom" label-size="12px" margin-top="16rpx"></u-icon>

   </view>


<!-- 服务模块 -->
    <view class="serve">

      <u-icon label="联系客服" size="45rpx" name="server-man" label-pos="right"  margin-left="16rpx" class="i-con"></u-icon>
      <p >400-457-5144</p>
      
    </view>
      <view class="serve">

      <u-icon label="投诉建议" size="45rpx" name="more-circle-fill" label-pos="right" label-size="37rpx" margin-left="16rpx" class="i-con"></u-icon>
    <p ></p>
      
    </view>
      <view class="serve">

      <u-icon label="当前版本" size="45rpx" name="error-circle-fill" label-pos="right" label-size="37rpx" margin-left="16rpx" class="i-con"></u-icon>
      <p >v.4.6.3</p>
      
    </view>

    <u-popup v-model="show" mode="bottom" :mask-close-able="true" :closeable="true" border-radius="20">
		<view class="drop">
			<u-button type="success" @click="accredit"> <u-icon name="weixin-fill" size="35rpx" class="icon"></u-icon>授权微信登录</u-button>
		</view>
	</u-popup>
   
  </view>
</template>

<script>
export default {
  data(){
    return{
      isLogin:false,
      show:false
    }
  },
  methods:{
   async accredit(){
      this.show=false

       const res = await this.Login() //调用公用mixin方法
       res? this.isLogin=true:this.isLogin=false
    }
  }

}
</script>

<style lang="scss">
.login{
  display: flex;
  justify-content: center;
  // 动态添加背景图片
  background-image: url('https://img1.baidu.com/it/u=1429201663,1954415843&fm=253&fmt=auto&app=138&f=GIF?w=350&h=200');
 
  box-shadow: 10px 10px 100px 40px rgba(26, 24, 24, 0.952) inset;  

 
  height:329rpx;


   .headPortrait{
 
  
    margin-top: 32rpx;
       .name{
        margin-top: 16rpx;
        padding-left: 38rpx;
        color: #fff;
       }
   }
}
.nav {
  margin-top: 50rpx;
  display: flex;
  justify-content: space-evenly;
 
}
.serve{
 margin-top: 20rpx;
   margin-left: 40rpx;
  margin-right: 40rpx;
  display: flex;
  justify-content: space-between;
  height: 100rpx;
  border-bottom: 1px #d1d1d1 solid;
 .i-con {
    margin-top: 10rpx;
  }
  p{
    margin-left: 58rpx;
    margin-top: 32rpx;
    font-size: 32rpx;
  }
 
}
.goLogin{
  margin-top: 150rpx;
}

.drop{
  padding-top: 100rpx;
  height: 300rpx;
  .icon{
    margin-right: 10rpx;
  }
}

</style>